<template>
	<view class="nav">
		<view class="nav-item">
			<view class="img">
				<text class="iconfont icon-ziyuan "></text>
			</view>
			<text>黑马超市</text>
		</view>
		<view class="nav-item" @click="onPush">
			<view class="img">
				<text class="iconfont icon-guanyuwomen"></text>
			</view>
			<text>联系我们</text>
		</view>
		<view class="nav-item" @click="onPushImage">
			<view class="img">
				<text class="iconfont icon-tupian"></text>
			</view>
			<text>社区图片</text>
		</view>
		<view class="nav-item">
			<view class="img">
				<text class="iconfont icon-shipin"></text>
			</view>
			<text>学习视频</text>
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			onPush() {
				uni.navigateTo({
					url: '/pages/Our/Our'
				})
			},
			onPushImage() {
				uni.navigateTo({
					url: '/pages/CommunityImage/CommunityImage'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		width: 750rpx;
		height: 220rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding-bottom: 4rpx;
		border-bottom: 6rpx solid #eeeeee;
		box-sizing: border-box;

		.nav-item {
			.img {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				background-color: #b50e03;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 16rpx;

				.iconfont {
					font-size: 46rpx;
					color: #fff;

				}


			}
		}

	}
</style>